<!--  -->
<template>
<div class=''>
    <!-- <el-radio v-model="radio" label="1">备选项1</el-radio>
   <el-radio v-model="radio" label="2">备选项2</el-radio>
    <el-radio v-model="radio" label="3">备选项3</el-radio>
  禁用状态 
  <el-radio v-model="radio" label="4" disabled>备选项4</el-radio>
   -->

   <!-- el-radio-group
       border 设置边框
       change事件来响应变化，它会传入一个参数value
       labal => string  number boolen
   -->
  <!-- <el-radio-group v-model="radio"  @change="getLable" >
      <el-radio label="1" border>备选项1</el-radio>
      <el-radio label="2" border>备选项2</el-radio>
       <el-radio label=true border>备选项3</el-radio>
        <el-radio label=11 border>备选项4</el-radio>
    </el-radio-group> -->

    <!-- 按钮样式的单选组合。
    把el-radio元素换成el-radio-button元素即可
    ，Element 还提供了size属性 	medium / small / mini
    text-color :激活时文字的颜色
    fill :激活时边框和背景色
     -->
  <el-radio-group v-model="radioButton" 
  size="medium"
   @change="getLable"
  text-color="blue"
  fill='red'
  >
      <el-radio-button label="睡觉" class="radio-btn">睡觉</el-radio-button>
      <el-radio-button label="吃饭"  class="radio-btn">吃饭</el-radio-button>
      <el-radio-button label="学习" class="radio-btn">学习</el-radio-button>
      <el-radio-button label="玩耍"  class="radio-btn" disabled>玩耍</el-radio-button>
    </el-radio-group>

</div>

</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
// 选中的label值 默认选中label值为1的单选框
// radio:'1'
 radioButton:'睡觉'
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
getLable:function(value){
  console.log("选中的单选框的labal值：",value);
}
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style  scoped>
.radio-btn{
  margin-left: 10px;
}
</style>